<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :xs="8" :sm="5" :md="4" :lg="3" :xl="3" class="left-column">
        <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical-demo"
          @select="handleMenuSelect"
        >
          <el-menu-item index="zyfl">
            <i class="el-icon-menu" />
            <span slot="title">资源分类</span>
          </el-menu-item>
          <el-menu-item index="zybm">
            <i class="el-icon-menu" />
            <span slot="title">资源编目</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <el-col :xs="16" :sm="19" :md="20" :lg="21" :xl="21" class="right-column">
        <!-- 资源分类组件 -->
        <ZYFL v-if="activeMenu === 'zyfl'" />

        <!-- 资源编目组件 -->
        <ZYBM v-if="activeMenu === 'zybm'" />
      </el-col>
    </el-row>

  </div>
</template>

<script>
import ZYFL from '@/views/resourceDirectory/commonts/zyfl.vue'
import ZYBM from '@/views/resourceDirectory/commonts/zybm.vue'
export default {
  components: {
    ZYFL,
    ZYBM
  },
  data() {
    return {
      activeMenu: 'zyfl' // 默认选中第一个导航项
    }
  },
  methods: {
    // 处理导航选择事件
    handleMenuSelect(menuIndex) {
      this.activeMenu = menuIndex // 更新当前选中的导航项
    }
  }
}
</script>

<style  lang="scss" scoped>

</style>
